<%--
  Created by IntelliJ IDEA.
  User: 您的名字
  Version: 1.0
 --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
<head>
    <title>EasyUI CRUD 示例页面</title>
    <meta charset="UTF-8">
    <base href="<%=request.getContextPath()%>/">
    <!-- 引入 EasyUI 的默认主题样式 -->
    <link rel="stylesheet" type="text/css" href="static/js/easyui/themes/bootstrap/easyui.css">
    <!-- 引入 EasyUI 的图标样式 -->
    <link rel="stylesheet" type="text/css" href="static/js/easyui/themes/icon.css">
    <!-- 引入自定义的公共CSS -->
    <link rel="stylesheet" type="text/css" href="static/css/common.css"/>
    <!-- 引入 EasyUI 默认的 jQuery（无需单独引入 jQuery） -->
    <script src="static/js/easyui/jquery.min.js"></script>
    <!-- 引入 EasyUI 的核心 JS 文件 -->
    <script src="static/js/easyui/jquery.easyui.min.js"></script>
    <!-- 引入 EasyUI 的中文语言包 -->
    <script src="static/js/easyui/locale/easyui-lang-zh_CN.js"></script>
    <!-- 引入自定义的公共脚本 -->
    <script src="static/js/owner/common.js"></script>
    <!-- 引入自定义的公共脚本 -->
    <script src="static/js/owner/dataGrid.js"></script>
    <!-- 引入 moment.js 库，用于处理日期和时间 -->
    <script src="static/js/owner/moment.min.js"></script>
    <!-- daterangepicker 是一个日期范围选择插件，支持选择开始和结束日期 -->
    <link rel="stylesheet" href="static/css/daterangepicker.css">
    <!-- 引入 daterangepicker 的脚本文件 -->
    <script src="static/js/owner/daterangepicker.js"></script>
</head>
<body>
<!-- 工具栏 -->
<div id="toolbar">
    <!-- 查询表单 -->
    <form id="searchForm" class="custom-search-form">
        <div class="custom-search-form__group">
            <label>驳回原因:</label>
            <input id="rejectReason" class="easyui-combobox" name="rejectReason" data-options="
            valueField: 'rejectReason',
            textField: 'rejectReason',
            data: [
              {id: 1, rejectReason: '文章质量太差'},
              {id: 2, rejectReason: '医院号不匹配'}
            ],
            panelHeight: 'auto',
            editable: false,
            prompt: '请选择驳回原因'">
        </div>
        <div class="custom-search-form__group">
            <label>创建时间:</label>
            <input id="createTime" class="easyui-datebox daterange" name="createTime">
        </div>
        <div class="custom-search-form__actions">
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" onclick="searchData()">查询</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" onclick="resetSearch()">重置</a>
        </div>
    </form>
    <!-- 操作按钮 -->
    <div style="margin-top: 20px;margin-bottom: 10px">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true"
           onclick="newUser()">新增</a>
        <a href="javascript:void(0)" id="editBtn" class="easyui-linkbutton" iconCls="icon-edit" plain="true"
           onclick="editUser()">编辑</a>
        <a href="javascript:void(0)" id="removeBtn" class="easyui-linkbutton" iconCls="icon-remove" plain="true"
           onclick="destroyUser()">删除</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-save" plain="true"
           onclick="excelDoc('content/export', {selectField: id})">导出</a>
        <a href="javascript:void(0)" id="detailBtn" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="viewDetails()">查看详情</a>
    </div>
</div>
<!-- 数据表格 -->
<table id="datagrid" class="easyui-datagrid">
    <thead>
    <tr>
        <th data-options="field:'ck',checkbox:true"></th>
        <th data-options="field:'id',width:50">ID</th>
        <th data-options="field:'rejectReason',width:100">驳回原因</th>
        <th data-options="field:'createTime',width:150,sortable:true,formatter:formatDate">创建时间</th>
        <th data-options="field:'programType',width:100">项目类型</th>
        <th data-options="field:'image',width:100,formatter:function(value, row, index){return formatImage(value, 100, 100, '图片');}">
            图片
        </th>
        <th data-options="field:'degreeOfDifficulty',width:100">难易程度</th>
    </tr>
    </thead>
</table>
<!-- 详细信息窗口 -->
<div id="detailWindow" class="easyui-window detail-window" title="详细信息" data-options="modal:true,iconCls:'icon-save',closed:true">
    <div class="detail-window__layout">
        <!-- 上方详情信息 -->
        <div class="detail-window__header">
            <div class="detail-window__detail-info">
                <div class="detail-window__key">机柜编号：</div>
                <div class="detail-window__value" id="boxId">加载中...</div>

                <div class="detail-window__key">上次通电时间：</div>
                <div class="detail-window__value" id="onlineTime">加载中...</div>

                <div class="detail-window__key">在线状态：</div>
                <div class="detail-window__value" id="isOnline">加载中...</div>

                <!-- 添加更多键值对 -->
                <div class="detail-window__key">其他键1：</div>
                <div class="detail-window__value">值1</div>

                <div class="detail-window__key">其他键2：</div>
                <div class="detail-window__value">值2</div>

                <div class="detail-window__key">其他键3：</div>
                <div class="detail-window__value">值3</div>

                <div class="detail-window__key">其他键4：</div>
                <div class="detail-window__value">值4</div>

                <div class="detail-window__key">其他键5：</div>
                <div class="detail-window__value">值5</div>

                <div class="detail-window__key">其他键6：</div>
                <div class="detail-window__value">值6</div>

                <div class="detail-window__key">其他键7：</div>
                <div class="detail-window__value">值7</div>

                <div class="detail-window__key">其他键8：</div>
                <div class="detail-window__value">值8</div>

                <div class="detail-window__key">其他键9：</div>
                <div class="detail-window__value">值9</div>

                <div class="detail-window__key">其他键10：</div>
                <div class="detail-window__value">值10</div>

                <div class="detail-window__key">其他键11：</div>
                <div class="detail-window__value">值11</div>

                <div class="detail-window__key">其他键12：</div>
                <div class="detail-window__value">值12</div>
            </div>
        </div>

        <!-- 中间数据表格 -->
        <div class="detail-window__table-container">
            <table id="detailTable" class="easyui-datagrid" style="width:100%;height:100%;"
                   data-options="singleSelect:true,fitColumns:true">
                <thead>
                <tr>
                    <th data-options="field:'boxPosition',width:150">宝仓编号</th>
                    <th data-options="field:'palId',width:150">充电宝编号</th>
                    <th data-options="field:'electricity',width:150">电量信息</th>
                </tr>
                </thead>
            </table>
        </div>

        <!-- 底部操作按钮 -->
        <div class="detail-window__footer">
            <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)" onclick="javascript:$('#detailWindow').window('close');" style="width:100px;">关闭</a>
            <a class="easyui-linkbutton" data-options="iconCls:'icon-search'" href="javascript:void(0)" onclick="javascript:$('#detailTable').datagrid('reload');" style="width:120px;">实时监测</a>
        </div>
    </div>
</div>
</body>


<!-- 对话框，用于新增和编辑记录 -->
<div id="dlg" class="easyui-dialog custom-dlg" style="width:800px"
     data-options="closed:true,modal:true,border:'thin',buttons:'#dlg-buttons'">
    <form id="fm" class="custom-dlg-form" method="post" enctype="multipart/form-data" novalidate
          style="margin:0;padding:20px">
        <!-- 隐藏的 ID 字段 -->
        <input type="hidden" name="id">

        <div class="form-container">
            <!-- 左侧列 -->
            <div class="form-column">
                <!-- 驳回原因 -->
                <div class="form-group">
                    <label>驳回原因</label>
                    <input name="rejectReason" class="easyui-textbox" style="width:100%">
                </div>
                <!-- 项目类型 -->
                <div class="form-group">
                    <label>项目类型</label>
                    <input name="programType" class="easyui-textbox" style="width:100%">
                </div>
                <!-- 难易程度 -->
                <div class="form-group">
                    <label>难易程度</label>
                    <input name="degreeOfDifficulty" class="easyui-combobox" style="width:100%">
                </div>
            </div>

            <!-- 右侧列 -->
            <div class="form-column">
                <!-- 图片 -->
                <div class="form-group">
                    <label>图片</label>
                    <div class="pic-container">
                        <img id="preView" name="" src="" alt=图片预览" class="thumbnail">
                        <input type="file" name="file" accept="image/*" onchange="prev(this)" multiple>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <!-- 对话框的按钮 -->
    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()">保存</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel"
           onclick="javascript:$('#dlg').dialog('close')">取消</a>
    </div>
</div>

<!-- 定义页面脚本 -->
<script type="text/javascript">
    $(function () {
        const pageConfig = {
            url: 'content/listByCondition', // 数据源URL
            toolbar: '#toolbar', // 自定义工具栏
            onLoadSuccess: function(data) {
                // alert("数据加载成功后执行的回调");
            }
        };

        // 调用公共函数初始化 DataGrid
        initializeDataGrid(pageConfig);
        // initializeDataGrid({url: 'content/listByCondition'});

        // 批量初始化所有类名为 daterange 的输入框
        initializeDateRangePickers('.daterange');
    });

    // 没有选中时 || 中多条数据时, 禁用按钮
    function disable() {
        $('#editBtn').linkbutton('disable');
        $('#removeBtn').linkbutton('disable');
    }

    // 选中一条数据时启用按钮
    function enable() {
        $('#editBtn').linkbutton('enable');
        $('#removeBtn').linkbutton('enable');
    }

    var url; // 定义全局变量，保存当前操作的URL

    // 新增记录
    function newUser() {
        $('#dlg').dialog('open').dialog('setTitle', '新增记录'); // 打开对话框
        $('#fm').form('clear'); // 清空表单
        url = 'content/save'; // 设置新增记录的请求URL

        $('#preView').attr('src', ''); // 清空图像预览
    }

    // 编辑记录
    function editUser() {
        var row = $('#datagrid').datagrid('getSelected'); // 获取选中行
        if (row) {
            $('#dlg').dialog('open').dialog('setTitle', '编辑记录');
            $('#fm').form('load', row); // 加载选中行的数据到表单
            url = 'content/update?id=' + row.id; // 设置更新记录的请求URL

            if (row.image) {
                $('#preView').attr('src', row.image); // 假设 `row.qrCode` 是图片 URL
            } else {
                $('#preView').attr('src', ''); // 如果没有二维码，清空图像预览
            }
        } else {
            $.messager.alert('提示', '请先选择要编辑的记录！', 'info');
        }
    }

    function saveUser() {
        // 阻止表单的默认提交
        $('#fm').form('submit', {
            url: url,  // 提交的URL
            onSubmit: function () {
                // 可以在这里添加验证逻辑
                return $(this).form('validate');
            },
            success: function (response) {
                // 提交成功后的回调
                $('#dlg').dialog('close');  // 关闭对话框
                $('#datagrid').datagrid('reload'); // 刷新数据表格
            },
            error: function () {
                alert('保存失败');
            }
        });
    }

    // 删除记录
    function destroyUser() {
        var row = $('#datagrid').datagrid('getSelected');
        if (row) {
            $.messager.confirm('确认', '你确定要删除这条记录吗？', function (r) {
                if (r) {
                    $.post('content/delete', {id: row.id}, function (result) {
                        if (result.code == '200') {
                            $('#datagrid').datagrid('reload'); // 刷新数据表格
                        } else {
                            $.messager.show({
                                title: '错误',
                                msg: result.errorMsg
                            });
                        }
                    }, 'json');
                }
            });
        } else {
            $.messager.alert('提示', '请先选择要删除的记录！', 'info');
        }
    }

    // 图片预览和大小验证
    function prev(input) {
        if (input.files && input.files[0]) {
            var file = input.files[0];
            if (file.size > 2 * 1024 * 1024) { // 2MB
                $.messager.alert('警告', '上传的图片不能超过2MB!', 'warning');
                input.value = '';
                $(input).siblings('.thumbnail').attr('src', '');
                return;
            }
            var reader = new FileReader();
            reader.onload = function (e) {
                var imgSrc = e.target.result;
                // 设置缩略图
                $(input).siblings('.thumbnail').attr('src', imgSrc);
            }
            reader.readAsDataURL(file);
        }
    }

    // 打开详情窗口
    function viewDetails(boxId) {
        $('#detailWindow').window({
            title: '详细信息',
            width: 800,
            height: 500,
            modal: true,
            onOpen: function() {
                // 加载上方详情信息
                $.ajax({
                    url: 'static/js/owner/test.json',
                    type: 'GET',
                    data: { boxId: boxId },
                    success: function(data) {
                        if (data) {
                            $('#boxId').text(data[0].boxId || '无数据');
                            $('#onlineTime').text(data[0].onlineTime || '无数据');
                            $('#isOnline').text(data[0].isOnline ? '在线' : '离线');
                        } else {
                            $.messager.alert('提示', '未找到机柜信息', 'info');
                        }
                    },
                    error: function() {
                        $.messager.alert('错误', '加载机柜信息失败', 'error');
                    }
                });
                // 加载中间表格数据
                $('#detailTable').datagrid({
                    url: 'static/js/owner/test2.json',
                    queryParams: { boxId: boxId },
                    method: 'get',
                    fitColumns: true,
                    loadMsg: '数据加载中，请稍后...',
                    emptyMsg: '暂无数据',     //当 DataGrid 中没有数据时，会在表格中间显示“暂无数据”的提示。
                    onLoadError: function() {
                        $.messager.alert('错误', '加载表格数据失败', 'error');
                    }
                });
            },
            onClose: function() {
                // 清空窗口内容
                $('#detailInfo span').text('加载中...');
                $('#detailTable').datagrid('loadData', { total: 0, rows: [] });
            }
        }).window('open').window('center');
    }
</script>
</body>
</html>
